<template>
  <div id="page-advertising">

    <div v-html="css"></div>

    <div class="advertising-preview" :class=className>
      <!--<p>{{selected_vdc}}</p>-->
      <!-- 主要布局，中间，最小宽度 375x667 -->
      <div class="main-layout is-app">
        <!-- 底部导航布局 -->
        <div class="weixin-preview">
          <div class="weixin-hd">
            <div class="weixin-title"></div>
          </div>
          <div class="weixin-bd">
            <ul class="weixin-menu" id="weixin-menu">
              <li
                v-for="(btn, i) in menu_button"
                class="menu-item" :style="{maxWidth: 100/menu_button.length+'%'}"
                :class="{ current: seletedId === btn.id && selectedMenuLevel() == 1 }"
                @click="selectedMenu(i, $event)"
              >
                <div class="menu-item-title" :style="{lineHeight:(tab_style.icon_set.icon_position=='top' && tab_style.text_set.text_show && btn.isIcon != '3'?'25px':'50px')}">
                    <img class="icon-img" v-if="fun.getKey('page_sort') == 4 && btn.isIcon == '1' && tab_style.icon_set.icon_show && btn.icon" :src="seletedId === btn.id && selectedMenuLevel() == 1 ? btn.icon : btn.default_icon" alt="" />
                    <i class="menu-icon iconfont" v-if="fun.getKey('page_sort') != 4 && btn.isIcon == '1'" :class="[btn.isIcon == '1'?btn.icon||'icon-fenlei4':'']"></i>
                    <img class="icon-img" v-if="btn.isIcon == '2' && tab_style.icon_set.icon_show" :src="btn.image|| emptyImage" alt="">
                    <div class="hide-box" v-if="tab_style.icon_set.icon_position=='top' && btn.isIcon != '3'" :style="{display: ((fun.getKey('page_sort') != 4 && tab_style.icon_set.icon_show) || (fun.getKey('page_sort') == 4  && tab_style.icon_set.icon_show && btn.icon)) ? 'none':''}" style="height: 10px"></div>
                    <span class="menu-text" v-if="tab_style.text_set.text_show" :style="{display:(tab_style.icon_set.icon_position=='top'?'block':'')}">{{ btn.text}}</span>
                </div>
                <i class="iconfont icon-close11 menu-item-delete" @click.stop="deleteMenu(selectedMenuIndex,btn,i)"></i>
                <template v-if="fun.getKey('page_sort') != 4">
                  <ul class="weixin-sub-menu" v-show="selectedMenuIndex === i">
                    <li
                        v-for="(sub, i2) in btn.sub_button"
                        class="menu-sub-item"
                        :class="{
                      current: seletedId === sub.id && selectedMenuLevel() == 2,
                    }"
                        @click.stop="selectedSubMenu(i2, $event)"
                    >
                      <div class="menu-item-title" :style="{lineHeight:(tab_style.icon_set.icon_position=='top' && tab_style.icon_set.icon_show && tab_style.text_set.text_show && sub.isIcon != '3'?'25px':'50px')}">
                        <i class="menu-icon iconfont" v-if="sub.isIcon == '1'" :class="[sub.isIcon == '1'?sub.icon||'icon-fenlei4':'']"></i>
                        <img class="icon-img" v-if="sub.isIcon == '2' && tab_style.icon_set.icon_show" :src="sub.image|| emptyImage" alt="">
                        <span class="menu-text" v-if="tab_style.text_set.text_show" :style="{display:(tab_style.icon_set.icon_position=='top'?'block':'')}">{{sub.text}}</span>
                      </div>
                      <i class="iconfont icon-close11 menu-item-delete" @click.stop="deleteChildMenu(selectedMenuIndex,sub,i2)"></i>
                    </li>
                    <li
                        v-if="btn.sub_button.length < 5"
                        class="menu-sub-item"
                        @click.stop="addMenu(2)"
                    >
                      <div class="menu-item-title" style="background-color: white">
                        <a-icon type="plus" style="color: #333333" />
                      </div>
                    </li>
                    <!-- <i class="menu-arrow arrow_out"></i>
                    <i class="menu-arrow arrow_in"></i> -->
                  </ul>
                </template>
              </li>
              <li
                class="menu-item"
                v-if="menu_button.length < 5"
                @click="addMenu(1)"
              >
                <a-icon type="plus" />
              </li>
            </ul>
          </div>
        </div>
      </div>

      <a-button type="primary" class="fix-class" @click="handle_save">保存</a-button>
    </div>

    <!-- 组件表单 -->
    <layout-form :selected_vdc="selected_vdc" />
  </div>
</template>

<script>
import emptyImage from "@/resource/images/image.png";
import layoutForm from "../../system-components/layout-form/index.vue"; // 组件表单区域

const css = function () {

	const {tab_style} = this.selected_vdc.config.datas;

	return  `
	      .component-${this.selected_vdc.id} .menu-item .menu-item-title span{
	          color: ${tab_style.value.text_set.text_color || '#333333'};
	      }

	      .component-${this.selected_vdc.id} .menu-item.current .menu-item-title span{
	          color: ${tab_style.value.text_set.text_choose_color || '#333333'};
	      }

	      .component-${this.selected_vdc.id} .menu-item .menu-item-title .iconfont{
	          color: ${tab_style.value.icon_set.icon_color || '#333333'};
	          display: ${tab_style.value.icon_set.icon_show? '':'none'};
	      }

	      .component-${this.selected_vdc.id} .menu-item.current .menu-item-title .iconfont{
	          color: ${tab_style.value.icon_set.icon_choose_color || '#333333'};
	          display: ${tab_style.value.icon_set.icon_show? '':'none'};
	      }

	      // .component-${this.selected_vdc.id} .menu-item .menu-item-title .hide-box {
	      //     display: ${tab_style.value.icon_set.icon_show ? 'none':''};
	      // }

	      // .component-${this.selected_vdc.id} .menu-item.current .menu-item-title  .hide-box {
	      //     display: ${tab_style.value.icon_set.icon_show? 'none':''};
	      // }

	      .component-${this.selected_vdc.id} .weixin-preview .menu-item {
	          background-color: ${tab_style.value.bg_set.bg_color || '#ffffff'};
	          border: ${tab_style.value.border_set.border_show?'1':'0'}px solid ${tab_style.value.border_set.border_color || '#333333'};
	      }

	      .component-${this.selected_vdc.id} .weixin-preview .menu-item.current {
	          background-color: ${tab_style.value.bg_set.bg_choose_color || '#ffffff'};
	          border: ${tab_style.value.border_set.border_show?'1':'0'}px solid ${tab_style.value.border_set.border_choose_color || '#333333'};
	      }

	      .component-${this.selected_vdc.id} .weixin-preview .menu-sub-item {
	          border: ${tab_style.value.border_set.border_show?'1':'0'}px solid ${tab_style.value.border_set.border_color || '#333333'};
            border-bottom: ${tab_style.value.border_set.border_show?'2':'0'}px solid ${tab_style.value.border_set.border_color || '#333333'};

	      }
	      .component-${this.selected_vdc.id} .weixin-preview .menu-sub-item.current {
	          border: ${tab_style.value.border_set.border_show?'1':'0'}px solid ${tab_style.value.border_set.border_choose_color || '#333333'};
            border-bottom: ${tab_style.value.border_set.border_show?'2':'0'}px solid ${tab_style.value.border_set.border_choose_color || '#333333'};
	      }

	      .component-${this.selected_vdc.id} .weixin-preview .weixin-sub-menu .menu-sub-item .menu-item-title {
	        background-color: ${tab_style.value.children_set.children_bg_color || '#ffffff'};
	      }

	      .component-${this.selected_vdc.id} .weixin-preview .weixin-sub-menu .menu-sub-item .menu-item-title span,
	      .component-${this.selected_vdc.id} .weixin-preview .weixin-sub-menu .menu-sub-item .menu-item-title i{
	        color: ${tab_style.value.children_set.children_color || '#333333'};
	      }

	      .component-${this.selected_vdc.id} .weixin-preview .weixin-sub-menu .menu-sub-item.current .menu-item-title span,
	      .component-${this.selected_vdc.id} .weixin-preview .weixin-sub-menu .menu-sub-item.current .menu-item-title i{
	        color: ${tab_style.value.children_set.children_choose_color || '#333333'};
	      }

    `;
};

export default {
  data() {
    return {
	    id: '',
	    page_sort: '1',
    	seletedId: '',  //当前选中菜单id
	    current_ids: [],
      selectedMenuIndex: "", //当前选中菜单索引
      selectedSubMenuIndex: "", //当前选中子菜单索引
      emptyImage,
      selected_vdc: {
	      id: 'M' + new Date().getTime(),
	      component_key: "U000251",
        component_title: "底部导航设置",
        template_id: 3,
        template_name: "template1",
        template_title: "模版一",
        template_list: [
          {
            id: 3,
            name_en: "template1",
            name: "模版一",
            component_key: "U000251",
          },
        ],
        config: {
          datas: {
	          group_title: { title: "底部导航名称", type: "text", value: "" },
	          button_item: {
		          title: '',
		          type: 'bottomItem',
		          choose: '2',
		          menu_button: [],
		          value: {}
	          },
	          tab_style: {
		          title: '',
		          type: 'tab',
		          value: {
			          text_set: {"text_show": true, "text_color": '#333333',"text_choose_color": '#29ba9c'},
			          icon_set: {"icon_show": true, "icon_position": 'top', "icon_color": '#333333',"icon_choose_color": '#29ba9c'},
			          border_set: {"border_show": false, "border_color": '#e7e7eb',"border_choose_color": '#29ba9c'},
			          bg_set: { "bg_color": '#ffffff',"bg_choose_color": '#ffffff'},
			          children_set: {"children_color": '#333333',"children_choose_color": '#29ba9c',"children_bg_color": '#ffffff'}
		          }
	          }
          },
          styles: {},
          layout: [
            {
              datas: [
                {
                  title: "页面配置",
                  groups: ["group_title"],
                },
	              {
		              title: "当前菜单",
		              groups: [
			              "button_item",
		              ],
	              },
	              {
		              title: "整体样式配置",
		              groups: [
			              "tab_style",
		              ],
	              },
              ],
              styles: [],
            },
          ],
        },
        is_loaded_config: true,
        remote_data: {},
        remote_style: {},
      },
    };
  },
  computed: {
	  menu_button() {
		  return this.selected_vdc.config.datas.button_item.menu_button;
    },
	  tab_style() {
	  	return this.selected_vdc.config.datas.tab_style.value;
    },
	  css() {
		  return '<style>' + css.call(this) + '</style>';
	  },
	  className() {
		  const name = ['component-wrapper', `component-${this.selected_vdc.id}`];
		  return name;
	  },
  },
  components: {
    layoutForm,
  },
	created() {
		this.id = this.$route.query.id;
		this.page_sort = this.fun.getKey('page_sort');
		if(this.id) {
			this.getData();
		}
	},
  methods: {
	  /**
	   * 获取底部导航详情
	   * @param {string} footer_id 导航ID
	   */
	  getData() {
		  $http.post("plugin.decorate.admin.decorate-footer.get-info", { footer_id: this.id }, "loading").then(response => {
			  if (response.result === 1) {
				  this.selected_vdc.config.datas = JSON.parse(response.data.page_info);
				  this.selected_vdc.config.datas.group_title.value = response.data.name;
				  // 清空当前选中
				  this.selected_vdc.config.datas.button_item.value = {}
			  } else {
				  if (response.msg) {
					  this.$message.error(response.msg);
				  }
			  }
		  }).catch(err => {
			  console.log(err);
		  });
	  },
	  handle_save() {
	  	let that = this;
		  let pageinfo = this.handle_data(this.selected_vdc.config.datas);
		  if(!pageinfo.group_title) {
			  this.$message.error('底部导航名称不能为空');
			  return
		  }
		  let json = {
			  id: this.id,
			  name: pageinfo.group_title,
			  page_sort: this.page_sort,
			  page_info: JSON.stringify(this.selected_vdc.config.datas),
		  };
		  // console.log(json,"json");
		  $http.post("plugin.decorate.admin.decorate-footer.save", json, "loading").then(response => {
			  if (response.result === 1) {
				  this.$success({
					  title: '提示',
					  content: '保存成功',
					  onOk: function () {
						  that.$router.push(that.fun.getUrl("/bottom_navigation_list"));
					  }
				  });
			  } else {
				  if (response.msg) {
					  this.$message.error(response.msg);
				  }
			  }
		  }).catch(err => {
			  console.log(err);
		  });
	  },
	  /**
	   * 处理数据
	   * @param {String} datas
	   * **/
	  handle_data(datas) {
		  let handleDatas = {};
		  Object.keys(datas).map(key => {
			  handleDatas[key] = datas[key].value;
		  });
		  return handleDatas;
	  },
    //添加菜单
    addMenu(level) {
      if (level == 1 && this.menu_button.length < 5) {

	      this.menu_button.map((item)=>{
		      this.current_ids.push(item.id);
	      });

	      let id = this.menu_button.length;
	      while (this.current_ids.includes(id)) {
		      id += 1;
	      }
	      this.current_ids.push(id);
        this.menu_button.push({
	        id: id,
	        text: '菜单',
	        image: '',
	        icon: '',
	        default_icon: '',
	        isIcon: '1',
	        link: '',
	        app_link: '',
	        isMinApp: '1',
	        gh_id: '',
	        minApp_link: '',
	        sub_button: [],
        });
        // this.selectedMenuIndex = this.menu_button.length - 1;
        // this.selectedSubMenuIndex = "";
      }

      if ( level == 2 && this.menu_button[this.selectedMenuIndex].sub_button.length < 5 ) {
	      this.menu_button[this.selectedMenuIndex].sub_button.map((item)=>{
		      this.current_ids.push('' + this.menu_button[this.selectedMenuIndex].id + item.id);
	      });
	      let id = '' + this.menu_button[this.selectedMenuIndex].id + this.menu_button[this.selectedMenuIndex].sub_button.length;
	      while (this.current_ids.includes(id)) {
		      id += 1;
	      }
	      this.current_ids.push(id);
        this.menu_button[this.selectedMenuIndex].sub_button.push({
	        id: '' + this.menu_button[this.selectedMenuIndex].id + this.menu_button[this.selectedMenuIndex].sub_button.length,
	        text: '菜单',
	        image: '',
	        icon: '',
	        default_icon: '',
	        isIcon: '1',
	        link: '',
	        app_link: '',
	        isMinApp: '1',
	        gh_id: '',
	        minApp_link: '',
        });
        // this.selectedSubMenuIndex = this.menu_button[this.selectedMenuIndex].sub_button.length - 1;
      }
    },
    deleteMenu(parent_index, item, index) {
      this.selectedMenuIndex= "";
      this.selectedSubMenuIndex = "";
	    if(this.seletedId == item.id) {
		    this.selected_vdc.config.datas.button_item.value = ''
      }
      this.menu_button.splice(index,1);
    },
    deleteChildMenu(parent_index, item, index) {
	    if(this.selectedMenuIndex == parent_index && this.selectedSubMenuIndex == index) {
		    this.selectedSubMenuIndex = "";
	    }
	    if(this.seletedId == item.id) {
		    this.selected_vdc.config.datas.button_item.value = ''
	    }
      this.menu_button[parent_index].sub_button.splice(index,1);
    },
    //选中主菜单
    selectedMenu(i, event) {
      this.selectedSubMenuIndex = "";
      this.selectedMenuIndex = i;
      let selectedMenu = this.menu_button[this.selectedMenuIndex];
      this.seletedId = selectedMenu.id;
	    this.selected_vdc.config.datas.button_item.value = selectedMenu
    },
    //选中子菜单
    selectedSubMenu(i, event) {
      this.selectedSubMenuIndex = i;
      let selectedSubMenu = this.menu_button[this.selectedMenuIndex].sub_button[this.selectedSubMenuIndex];
	    this.seletedId = selectedSubMenu.id;
	    this.selected_vdc.config.datas.button_item.value = selectedSubMenu
    },
    //选中菜单级别
    selectedMenuLevel() {
      if (this.selectedMenuIndex !== "" && this.selectedSubMenuIndex === "") {
        //主菜单
        return 1;
      } else if (
        this.selectedMenuIndex !== "" &&
        this.selectedSubMenuIndex !== ""
      ) {
        //子菜单
        return 2;
      } else {
        //未选中任何菜单
        return 0;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.advertising-preview {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding-top: 75px;
  padding-bottom: 100px;
  overflow-y: scroll;

  // 主要预览布局
  .main-layout {
    position: relative;
    margin: 0 45% 0 auto;
    width: 375px;
    min-height: 500px;
    background: #fff;
    box-shadow: -10px 20px 30px 0px rgba(192, 197, 205, 0.8);
    .bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      border-top: 1px solid #e7e7e7;
    }
    // 为空
    &.is-empty {
      .is-empty {
        display: block;
      }
    }
    // 空数据的样式
    .is-empty {
      position: absolute;
      left: 0px;
      top: 270px;
      right: 0px;
      display: none;
      text-align: center;
      color: #c7dcff;
      font-size: 14px;
      img {
        margin: 0 auto;
        display: block;
      }
    }
  }
}
* {
  box-sizing: border-box;
}
ul {
  padding: 0;
}
li {
  list-style: none;
}
#app-menu {
  overflow: hidden;
  width: 950px;
}
.weixin-preview {
  position: relative;
  display: inline-block;
  width: 375px;
  min-height: 500px;
  float: left;
  margin-right: 10px;
  border: 1px solid #e7e7eb;
}
.weixin-preview a {
  text-decoration: none;
  color: #616161;
}
.weixin-preview .weixin-hd {
  color: #fff;
  text-align: center;
  position: relative;
  top: 0px;
  left: 0px;
  width: 320px;
  height: 64px;
  // background: transparent url({{ plugin_assets('wechat', 'assets/images/menu_head.png') }}) no-repeat 0 0;
  background-position: 0 0;
}
.weixin-preview .weixin-hd .weixin-title {
  color: #fff;
  font-size: 15px;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 33px;
  left: 0px;
}

.weixin-preview .weixin-bd {
}
.weixin-preview .weixin-menu {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #e7e7e7;
  // background: transparent url({{ plugin_assets('wechat', 'assets/images/menu_foot.png') }}) no-repeat 0 0;
  // background-position: 0 0;
  // background-repeat: no-repeat;
  // padding-left: 43px;
  margin-bottom: 0px;

  display:flex;
}
/*一级*/
.weixin-preview .weixin-menu .menu-item {
  max-width: 100%;
  position: relative;
  // float: left;
  line-height: 50px;
  height: 50px;
  text-align: center;
  // width: 20%;
  flex:1;
  /*border-left: 1px solid #e7e7e7;*/
  /*border-right: 1px solid #e7e7e7;*/
  cursor: pointer;
  color: #616161;
}

/*二级*/
.weixin-preview .weixin-sub-menu {
  position: absolute;
  bottom: 52px;
  left: 0;
  right: 0;
  border-top: 1px solid #d0d0d0;
  margin-bottom: 0px;
  background: #fafafa;
  display: block;
  padding: 0;
}
.weixin-preview .weixin-sub-menu .menu-sub-item {
  line-height: 50px;
  height: 50px;
  text-align: center;
  width: 100%;
  /*border: 1px solid #d0d0d0;*/
  cursor: pointer;
  position: relative;
  color: #616161;
  box-sizing: content-box;
}
.weixin-preview .menu-arrow {
  position: absolute;
  left: 50%;
  margin-left: -6px;
}
.weixin-preview .arrow_in {
  bottom: -4px;
  display: inline-block;
  width: 0px;
  height: 0px;
  border-width: 6px 6px 0px;
  border-style: solid dashed dashed;
  border-color: #fafafa transparent transparent;
}
.weixin-preview .arrow_out {
  bottom: -5px;
  display: inline-block;
  width: 0px;
  height: 0px;
  border-width: 6px 6px 0px;
  border-style: solid dashed dashed;
  border-color: #d0d0d0 transparent transparent;
}

.weixin-preview .menu-item .menu-item-title,
.weixin-preview .menu-sub-item .menu-item-title {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
  padding-top: 1px;
}

.advertising-preview .menu-item .menu-item-title span,
.advertising-preview .menu-sub-item .menu-item-title span{
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.weixin-preview .weixin-sub-menu.show {
  display: block;
}
.weixin-preview .icon_menu_dot {
  // background: url({{ plugin_assets('wechat', 'assets/images/plus.png') }}) 0px -36px no-repeat;
  width: 7px;
  height: 7px;
  vertical-align: middle;
  display: inline-block;
  margin-right: 2px;
  margin-top: -2px;
}
.weixin-preview .icon14_menu_add {
  // background: url({{ plugin_assets('wechat', 'assets/images/plus.png') }}) 0px 0px no-repeat;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  display: inline-block;
  margin-top: -2px;
}
.weixin-preview li:hover .icon14_menu_add {
  // background: url({{ plugin_assets('wechat', 'assets/images/plus.png') }}) 0px -18px no-repeat;
}

.menu-item-delete{
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 12px;
  line-height: 1;
}

.fix-class {
  position: fixed;
  top: 95px;
  right: 385px;
  width: 80px;
}

.icon-img {
  width: 21px;
  height: 21px;
  display: inline-block;
  margin-top: -5px;
}

.menu-icon {
  font-size: 22px;
  vertical-align: sub;
}
</style>
